<template>
  <!-- 预约挂号 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="预 约 挂 号">
      <mt-button slot="left" icon="back" @click="goHome">返回</mt-button>
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <div class="pageOne" v-if="isPageShow">
      <!-- 表单区域 -->
      <van-form>
        <van-field
          clearable
          v-model="patientMsg.name"
          name="name"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请输入预约体检人姓名' }]"
        />
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="patientMsg.sex" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          clearable
          type="number"
          v-model="patientMsg.age"
          name="name"
          label="年龄"
          placeholder="年龄"
          :rules="[{ required: true, message: '请填写挂号人年龄' }]"
        />
        <van-field
          clearable
          v-model="patientMsg.phone"
          type="number"
          name="name"
          label="电话"
          maxlength="11"
          placeholder="联系电话"
        />
        <van-field
          clearable
          v-model="patientMsg.cardId"
          name="id"
          label="身份证"
          placeholder="身份证"
          :rules="[{ required: true, message: '请填写挂号人身份证' }]"
        />
        <van-field
          readonly
          clickable
          name="name"
          :value="departmentName"
          label="预约挂号科室"
          placeholder="请选择预约科室"
          @click="showPart = true"
          :rules="[{ required: true, message: '请选择预约挂号科室' }]"
        />
        <van-field
          readonly
          clickable
          name="name"
          :value="doctorName"
          label="预约医生"
          placeholder="请选择预约医生"
          @click="doctorClick"
          :rules="[{ required: true, message: '请选择预约医生' }]"
        />
        <van-field
          clearable
          type="textarea"
          v-model="patientMsg.description"
          label="病情描述"
          placeholder="请填写病情描述"
          :rules="[{ required: true, message: '请填写病情描述' }]"
        />

        <!-- 科室选择弹出层 -->
        <van-popup
          v-model="showPart"
          position="bottom"
          :style="{ height: '60%' }"
        >
          <!-- 科室选择器 -->
          <van-picker
            title="选择科室"
            show-toolbar
            :columns="columns"
            value-key="departmentName"
            @confirm="onConfirm"
            @cancel="showPicker1 = false"
          />
        </van-popup>

        <!-- 医生选择弹出层 -->
        <van-popup
          v-model="showPart2"
          position="bottom"
          :style="{ height: '60%' }"
        >
          <!-- 医生选择器 -->
          <van-picker
            title="选择医生"
            show-toolbar
            :columns="columns2"
            value-key="name"
            @confirm="onConfirm2"
            @cancel="showPicker2 = false"
          />
        </van-popup>
      </van-form>

      <!-- 确认挂号按钮 -->
      <div style="margin-top: 25px">
        <van-button round block type="primary" @click="checkMsg"
          >确认挂号{{ datas }}</van-button
        >
      </div>

      <!-- 付款中遮罩层 -->
      <van-overlay :show="Isshadow">
        <div class="loade" @click.stop>
          <van-loading color="#0094ff" vertical text-size="16"
            >自动付款中...</van-loading
          >
        </div>
      </van-overlay>
    </div>

    <div class="pageTwo" v-else>
      <div class="ico">
        <van-icon name="wechat-pay" tag="div" color="#1989fa" size="50" />
        <p>挂号成功</p>
        <p @click="goHome">点击返回首页</p>
      </div>
    </div>
  </div>
</template>

<script>
// import { Dialog } from "vant";
import { Toast } from "vant";
import { Dialog } from "vant";
export default {
  name: "appointment",

  data() {
    return {
      showCalendar: false, //日历是否展示
      showPart: false, //科室picker是否显示
      showPart2: false, //医生picker是否显示
      Isshadow: false, //遮挡层是否显示
      datas: null,
      patientMsg: {
        name: "", //姓名
        sex: "",
        age: "", //年龄
        phone: "", //电话
        cardId: "", //身份证
        departmentId: "", //科室名称id
        doctorId: "", //医生名称id
        description: "", //病情描述
      },
      departmentName: "", //科室名称
      doctorName: "", //医生名称
      columns: [], //科室名称数组列表
      columns2: [], //医生名称数组列表
      partsPrice: [],
      partIndex: null, //选择的科室的索引值
      needPrice: null, //需要支付的挂号费
      isPageShow: true,
    };
  },

  created() {
    this.getPart(); //获取科室
    //this.getDoctor();
  },

  mounted() {},

  methods: {
    //科室名称选择器展开
    onConfirm(value) {
      //console.log(`当前值：${value}, 当前索引：${index}`);
      this.departmentName = value.departmentName;
      this.patientMsg.departmentId = value.id;
      this.showPart = false;
      // console.log(this.patientMsg.departmentId);
    },
    //医生名称选择器展开
    onConfirm2(value) {
      this.doctorName = value.name;
      this.patientMsg.doctorId = value.id;
      this.showPart2 = false;
      console.log(this.patientMsg.doctorId);
    },
    //获取科室名称字典
    getPart() {
      this.$http
        .get("departments", {})
        .then((res) => {
          //console.log(res);
          this.columns = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取医生名称字典
    getDoctor(id) {
      this.$http
        .get("doctor", {
          params: {
            departmentId: id,
          },
        })
        .then((res) => {
          console.log(res);
          this.showPart2 = true;
          this.columns2 = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //医生表单项目点击
    doctorClick() {
      if (this.departmentName == "") {
        Toast("请先选择科室");
      } else {
        this.getDoctor(this.patientMsg.departmentId);
      }
    },
    onValuesChange(picker, values) {
      var valueText = JSON.stringify(values);
      valueText = valueText.replace(/[^\u4e00-\u9fa5]/gi, "");
      this.patientMsg.partPicker = valueText;
    },
    //点击挂号后先验证表单
    checkMsg() {
      //先对表单进行验证
      if (
        this.patientMsg.name == "" ||
        this.patientMsg.sex == "" ||
        this.patientMsg.age == "" ||
        this.patientMsg.cardId == "" ||
        this.patientMsg.partPicker == "" ||
        this.patientMsg.description == ""
      ) {
        Toast({
          message: "请正确填写预约挂号信息",
        });
      } else {
        this.patientMsg.sex = this.patientMsg.sex == "1" ? "男" : "女";
        this.goSubmit();
        console.log(this.patientMsg);
      }
    },
    //调用挂号API
    goSubmit() {
      this.$http
        .post("outpatient-register", this.patientMsg)
        .then((res) => {
          console.log(res);
          Dialog.confirm({
            title: "挂号成功",
            message: "是否跳转到挂号列表页面",
            confirmButtonText: "查看挂号历史",
            cancelButtonText: "返回首页",
            confirmButtonColor: "#07c160",
            cancelButtonColor: "#ff976a",
          })
            .then(() => {
              //调用支付接口
              console.log("跳转挂号列表信息页面");
              this.$router.push({
                path: "./hospitalization",
              });
            })
            .catch(() => {
              this.$router.push({
                path: "./index",
              });
            });
        })
        .catch(() => {
          Toast("挂号失败，请稍后再试");
        });
    },
    goHome() {
      this.$router.push({
        path: "./index",
      });
    },
  },
};
</script>

<style lang="less" scoped>
#app /deep/ .mint-header-title {
  overflow: initial;
}
#app {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  background-color: #fff;
}

.mint-popup-4 {
  width: 101%;
}
.mint-popup-4 .picker-slot-wrapper,
.page-popup .mint-popup-4 .picker-item {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.content /deep/ .mint-field-core {
  background: #fff;
}
.btnClick {
  position: fixed;
  width: 100%;
  bottom: 0;
}
.ico {
  display: flex;
  margin-top: 100px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.ico p {
  font-size: 20px;
  font-weight: 700;
  color: #1989fa;
  margin: 2px 0;
}
.ico p:nth-child(3) {
  border-bottom: 2px solid;
}
.loade {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /deep/ .van-loading__text {
    font-weight: 700;
  }
}
</style>